<!-- 整场测算 新 下钻页 -->
<template>
  <div class="zs-table-page-container">
    <div class="zs-card-sm zs-space-bottom zs-layout-flex-row zs-layout-justify-between">
      <span>
        <el-select v-model="queryParams.biProjectCode" filterable class="zs-select-md zs-space-right-sm"
          @change="handleChangeBuild" placeholder="项目">
          <el-option v-for="item in projectList" :key="item.biProjectCode" :label="item.projectName"
            :value="item.biProjectCode" />
        </el-select>
        <el-date-picker class="zs-space-right-sm" v-model="queryParams.yearmonth" type="month" placeholder="日期"
          :clearable="false" value-format="YYYY-MM" />
        <el-select v-model="queryParams.brandname" :teleported="false" filterable multiple
          class="zs-select-md zs-space-right-sm" placeholder="品牌" clearable>
          <el-option v-for="(item, index) in brandList" :key="index" :label="item.brandname" :value="item.brandname" />
        </el-select>
        <el-popover popper-class="zs-popper" placement="bottom-end" trigger="click">
          <template #reference>
            <el-button class="zs-btn-square-solid" :class="{ 'zs-btn-square-solid-active': queryParams.contractslab.length > 0 || queryParams.zlStatus.length > 0 || queryParams.contractscode.length > 0 || queryParams.propertytypename.length > 0 }">
              <el-icon>
                <MoreFilled />
              </el-icon>
            </el-button>
          </template>
          <template #default>
            <div>
              <el-select v-model="queryParams.contractslab" :teleported="false" filterable multiple
                class="zs-select-md zs-space-right-sm" placeholder="合同状态" clearable>
                <el-option label="本年合同" value="本年合同" />
                <el-option label="非本年合同" value="非本年合同" />
              </el-select>
              <el-select v-model="queryParams.zlStatus" :teleported="false" filterable multiple
                class="zs-select-md zs-space-right-sm" placeholder="租赁状态" clearable>
                <el-option label="已出租" value="已出租" />
                <el-option label="已起租" value="已起租" />
                <el-option label="空置" value="空置" />
              </el-select>
              <el-select v-model="queryParams.contractscode" :teleported="false" filterable multiple
                class="zs-select-md zs-space-right-sm" placeholder="合同编码" clearable>
                <el-option v-for="(item, index) in contractList" :key="index" :label="item.contractscode"
                  :value="item.contractscode" />
              </el-select>
              <el-select v-model="queryParams.propertytypename" :teleported="false" filterable multiple
                class="zs-select-md zs-space-right-sm zs-space-top-sm" placeholder="资产类型" clearable>
                <el-option v-for="(item, index) in bizTypeList" :key="index" :label="item.propertytypename"
                  :value="item.propertytypename" />
              </el-select>
            </div>
          </template>
        </el-popover>
        <el-button @click="queryList" class="zs-btn-plain">查询</el-button>
      </span>
      <span class="zs-layout-flex-row">
        <el-button class="zs-btn-plain" @click="handleDownload"><el-icon class="el-icon--left">
            <Upload />
          </el-icon>导出</el-button>
      </span>
    </div>
    <div class="zs-card zs-table-page-content">
      <hsPageTable :loading="tableData.loading" :total="tableData.total" :tableData="tableData.data"
        :cloumns="tableData.cloumns" @pageChange="pageChange">
        <template #bottomTip>
          <div class="zs-text-gray-dark zs-text-sm zs-space-top">*单位：元/月/㎡</div>
        </template>
      </hsPageTable>
    </div>
  </div>
</template>

<script setup>
import dbPublicApi from '@/api/dbPublic'
import detailApi from '@/api/Manage/Business/detailPages'
// import PageTable from "@/components/page-table.vue"
import { downloadNewFile } from "@/utils/publicUtils"
import { dateFormat } from '@/utils/number-util'
import { reactive, ref } from "vue"
import { useStore } from "vuex";
import { useRoute } from "vue-router";
let store = useStore();
const curPageSize = ref(store.state.uiPageSizeDefault);
const route = useRoute()
let { biProjectCode, updateDate, tabPermi } = route.query
// 查询条件
let queryParams = reactive({
  pageNo: 1,
  pageSize: curPageSize,
  zlStatus: [],
  brandname: [],
  propertytypename: [],
  contractscode: [],
  contractslab: [],
  biProjectCode: biProjectCode,
  yearmonth: dateFormat(new Date(updateDate).getTime(), 'YYYY-MM')
})

// 表格数据
let tableData = reactive({
  loading: false,
  data: [],
  total: 0,
  cloumns: [
    { prop: 'propertytypename', label: '资产类型', width: '80' },
    { prop: 'floorsname', label: '楼层' },
    { prop: 'conshopcode', label: '铺位编号', align: 'left' },
    { prop: 'brandname', label: '品牌名称', align: 'left', minWidth: '120' },
    { prop: 'usablearea', label: '租赁面积', align: 'right' },
    { prop: 'zlStatus', label: '租赁状态' },
    { prop: 'contractslab', label: '合同状态', width: '120' },
    { prop: 'contractPrice', label: '签约价', align: 'right' },
    { prop: 'contractBasePrice', label: '基准价', align: 'right' },
    // { prop: 'countContractPrice', label: '计算签约价', align: 'right', minWidth: '100' },
    {
      prop: 'bl', label: '比例', align: 'right', minWidth: '100', isHaveClass: true,
      currentClass: (row) => {
        return {
          "zs-text-red": row.colorLab == 1,
        };
      },
    },
    { prop: 'contractsigndate', label: '签约日期', width: '120' },
    { prop: 'constartdate', label: '合同开始', width: '120' },
    { prop: 'chargestartdate', label: '起租日期', width: '120' },
    { prop: 'conenddate', label: '合同结束', width: '120' },
    { prop: 'renttypedesc', label: '租金架构', align: 'left', minWidth: '150' },
    { prop: 'contractscode', label: '合同编码', width: '120' },
  ]
})
// 分页变化
function pageChange (page) {
  queryParams.pageNo = page.current
  queryParams.pageSize = page.pageSize
  queryList()
}
function queryList () {
  tableData.loading = true
  // const params = {
  //   biProjectCode: queryParams.biProjectCode,
  //   buildingid: queryParams.buildingid,
  //   pageNo: queryParams.pageNumber,
  //   pageSize: queryParams.pageSize,
  //   yearmonth: queryParams.yearmonth,
  // }
  detailApi.queryPcBuildingInfoApi(queryParams).then((res) => {
    if (res.data.code == 200) {
      tableData.data = res.data.data.childList
      tableData.total = res.data.data.totalCount
      tableData.loading = false
    } else {
      tableData.data = []
      tableData.total = 0
      tableData.loading = false
    }
  })
}
queryList()


function handleChangeBuild () {
  queryParams.buildingid = ''
  getBuildList()
}
const brandList = ref([])
const bizTypeList = ref([])
const contractList = ref([])
// 获取楼层列表
const getBuildList = async () => {
  await detailApi.queryPcBrandDownDownApi({ biProjectCode: queryParams.biProjectCode, yearmonth: queryParams.yearmonth }).then((res) => {
    if (res.data.code == 200) {
      brandList.value = res.data.data
    }
  })
  await detailApi.queryPcAssetDownApi({ biProjectCode: queryParams.biProjectCode, yearmonth: queryParams.yearmonth }).then((res) => {
    if (res.data.code == 200) {
      bizTypeList.value = res.data.data
    }
  })
  await detailApi.queryPcContractCodingDownDownApi({ biProjectCode: queryParams.biProjectCode, yearmonth: queryParams.yearmonth }).then((res) => {
    if (res.data.code == 200) {
      contractList.value = res.data.data
    }
  })
}
getBuildList()

let projectList = ref([]) // 项目列表
// 获取项目列表
const getPorjectList = async () => {
  await dbPublicApi.queryProjectPcApi({ dataTime: updateDate, resourceKey: tabPermi }).then((res) => {
    if (res.data.code == 200) {
      projectList.value = res.data.data
    }
  })
}
getPorjectList()

// 导出
async function handleDownload () {
  const fileName = `整场测算明细.xls`;
  let fileData = await detailApi.WhleCalculateExportApi(queryParams);
  downloadNewFile(fileData.data, fileName);
  // detailApi.WhleCalculateExportApi(queryParams).then(res => {
  //   console.log(res.data, 'adasa');
  //   downloadNewFile(res.data, `整场测算明细.xls`)
  // })
} 
</script>

<style lang="scss" scoped></style>
